<template>
	<view class="appraisal_cont">
		<view class="saracontitit">
			<view class="nametext"><view class="circle"></view>您的评测等级类型</view>
			<view class="typename">{{textname}} <text class="text" v-if="typename!=''">({{typename}} 级)</text></view>
		</view>
		<view class="gauge_cont">
			<best-gauge :config="gaugeOption"></best-gauge>
		</view>
		<view class="_cont_tit">
			{{tit}} <text class="type">{{tittype}}</text>
		</view>
		<u-button v-if="isSai" type="primary" shape="circle" size="medium" @click="raisalFn" :custom-style="customStyle">立即评测</u-button>
		<u-button v-if="!isSai" type="primary" shape="circle" size="medium" @click="lookFn" :custom-style="customStyle">查看策略</u-button>
		<view v-if="!isSai&&assess==2" class="anewraisal" @click="anewFn">
			重新测试
		</view>
		<!-- <u-modal v-model="anewshow" :content="content" :show-cancel-button='true' @confirm="raisalFn"></u-modal> -->
		<u-popup v-model="anewshow" mode="bottom" :mask="false" :mask-close-able="false">
			<view class="u-model">
				<view class="u-model__title u-line-1">{{ content }}</view>
				<view class="u-model__footer u-border-top">
					<view :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button" @click="anewshow=false">
						取消
					</view>
					<view style="border-left: 1px solid #f6f6f6;"></view>
					<view :hover-stay-time="100" :hover-class="'u-model__btn--hover'" class="u-model__footer__button hairline-left" @click="raisalFn">
						<view name="confirm-button">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
	<!-- <u-form :model="form" ref="uForm">
			<u-form-item label="味道">
				<u-radio-group v-model="radio">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form> -->
</template>

<script>
	import bestGauge from './best-gauge/best-gauge.vue'
	import {checkTopic} from '@/api/default.js'
	export default {
		data() {
			return {
				anewshow:false,
				isSai:true,
				assess:1,
				textname:'暂无',
				typename:'',
				tit:'为了给您提供更优质的服务,请您及时进行风险评测',
				tittype:'',
				customStyle:{
					marginTop:'20px',
				},
				gaugeOption:{
					name:'请评测',
					id: 'gaugeId0',
                    value: '',
					status:false,
					width:250,
					detail:{
						title:{
							fontSize:30
						},
						value:{
							fontSize:20
						}
						
					},
					
                    axisTickLength: 2// assess_grade  assess_status 该属性与axisTick互斥，存在axisTickLength并大于0，axisTick就无效
				},
				content:'您还可以评测一次，确认从新评测吗？'
			}
		},
		//赌定未来:
// 你是A1 B1 C1 D1 E1 

// E1 11分以下，D1 11-50分  C1  50-75分 B176-90  A1 91-100
// E1:不合格
// D1:保守型
// C1:稳健型
// B1：进取型
// A1：激进型
// 评估等级：；您适合选择稳健性产品
// 重新评估
// 赌定未来:
// 评估等级：E1 ；非常抱歉，您的评估不合格，暂时不适合选购平台产品
// 赌定未来:
// 为了给您提供更优质的服务,请您及时进行风险评测 立即评测
		components: {
			bestGauge
		},
		onLoad() {
			// const user=uni.getStorageSync('userinfo_key')
			// assess_chance: 2
			// assess_grade: 50
			// assess_status: 1,
			let {assess_chance,assess_grade,assess_status}=uni.getStorageSync('userinfo_key')
			if(assess_status==1){
				this.isSai=false
				this.allFn(assess_grade)
				this.assess=assess_chance				
			}else{
				this.isSai=true
			}
		},
		onShow() {
			// const raisal=uni.getStorageSync('appraisal_key')
			let user = uni.getStorageSync("userinfo_key")
			if(user.assess_grade){
				this.allFn(raisal)
			}
		},
		methods: {
			allFn(raisal){
				this.isSai=false
				// this.tit='您得投资类型'
				this.gaugeOption.value=raisal
				if(raisal<11){
					this.textname='不合格'
					this.typename='E1'
					this.gaugeOption.name='不合格'
					// this.gaugeOption.name='不合格'
					this.tit='非常抱歉，您的评估不合格，暂时不适合选购平台产品'
				}else if(raisal>=11&&raisal<50){
					this.textname='保守型'
					this.typename='D1'
					this.gaugeOption.name='保守型'
					// this.gaugeOption.name='保守型'
					this.tit='您的风险承受能力：'
					this.tittype='很低'
				}else if(raisal>=50&&raisal<75){
					this.textname='稳健型'
					this.typename='C1'
					this.gaugeOption.name='稳健型'
					// this.gaugeOption.name='稳健型'
					this.tit='您的风险承受能力：' 
					this.tittype='较低'
				}else if(raisal>=76&&raisal<90){
					this.textname='进取型'
					this.typename='B1'
					this.gaugeOption.name='进取型'
					// this.gaugeOption.name='进取型'
					this.tit='您的风险承受能力：'
					this.tittype='很高'
				}else{
					this.textname='激进型'
					this.typename='A1'
					this.gaugeOption.name='激进型'
					// this.gaugeOption.name='激进型'
					this.tit='您的风险承受能力：'
					this.tittype='非常高'
				}
			},
			anewFn(){
				this.anewshow=true
			},
			raisalFn(){
				uni.navigateTo({
					url:'./salcont/salcont'
				})
				this.anewshow=false
			},
			lookFn(){
				uni.switchTab({
				    url: '/pages/tabBar/strategy/index'
				});
			},
			anewraisalFN(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	/deep/ .u-model{
		z-index: 999999;
	}
	
	.u-model {
		height: auto;
		overflow: hidden;
		font-size: 32rpx;
		background-color: #fff;
	
		&__btn--hover {
			background-color: rgb(230, 230, 230);
		}
	
		&__title {
			border-top: 1px solid #CCCCCC;
			padding-top: 48rpx;
			padding-bottom: 48rpx;
			font-weight: 500;
			text-align: center;
			color: $u-main-color;
		}
	
		&__content {
			&__message {
				padding: 48rpx;
				font-size: 30rpx;
				text-align: center;
				color: $u-content-color;
			}
		}
	
		&__footer {
			display: flex;
	
			&__button {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				cursor: pointer;
				text-align: center;
				border-radius: 4rpx;
			}
		}
	}
.appraisal_cont{
	// margin: auto;
	height: 100vh;
	display: flex;
	// justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #fff;
	.saracontitit{
		width: 100%;
		padding: 0 40px;
		margin-top: 30px;
		.nametext{
			display: flex;
			// justify-content: center;
			align-items: center;
			font-size: 14px;
			.circle{
				display: inline-block;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background-color: #80ACE8;
				margin-right: 10px;
			}
		}
		.typename{
			margin-top: 5px;
			font-size: 30px;			
			color: #006FF6;
			margin-left: 18px;
			.text{
				font-size: 12px;
				margin-left: 5px;
			}
		}
	}
	._cont_tit{
		margin: 20px 0 30px;
		font-size: 15px;
		font-weight: bold;
		.type{
			color: #CA3D45;
		}
	}
	.gauge_cont{
		margin: 40px 0 30px;
	}
	.anewraisal{
		margin-top: 40px;
		color:#0074F7;
	}
	
}
</style>
